<template>
  <div class="app-container">
    <el-input v-model="filterText" placeholder="要素搜索" style="margin-bottom: 30px;" />
    <div style="display: flex">
      <el-tree
        id="tree"
        ref="tree2"
        :data="data2"
        :props="defaultProps"
        :filter-node-method="filterNode"
        class="filter-tree"
        @node-click="handleNodeClick"
      >
      </el-tree>
      <div id="show_help2" v-show="add_flag==10||add_flag==11" class="center-content">
        <div id="add1" v-show="add_flag==10" class="show_right">
          <h3>点击加号添加抽象装备要素</h3>
          <img src="@/icons/svg/add.png" @click="addClick1">
        </div>
        <div id="add2" v-show="add_flag==11" class="show_right">
          <h3>点击加号添加{{ categoryNameSlected }}实例</h3>
          <img src="@/icons/svg/add.png" @click="addClick2">
        </div>
      </div>
      <div id="show_help" v-show="flag==1||flag==2||flag==3">
        <div v-show="flag==1" class="show_right1">
          <h3>请添加抽象装备要素</h3>
          <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
            <el-form-item
              prop="equipmentname"
              label="装备类型"
              :rules="[
                { required: true, message: '请输入装备类型', trigger: 'blur' },
              ]"
            >
              <el-input v-model="dynamicValidateForm.equipmentname" placeholder="请输入装备类型名称"></el-input>
            </el-form-item>
<!--            <el-form-item-->
<!--              v-for="(domain, index) in dynamicValidateForm.domains"-->
<!--              :label="'属性' + (index + 1)"-->
<!--              :key="domain.key"-->
<!--              :prop="'domains.' + index + '.value'"-->
<!--              :rules="{required: true, message: '属性不能为空', trigger: 'blur'}"-->
<!--            >-->
<!--              <el-input v-model="domain.value" placeholder="请按照“属性名，单位”的格式输入，如“重量，吨”"></el-input>-->
<!--              <el-button @click.prevent="removeDomain(domain)">删除</el-button>-->
<!--            </el-form-item>-->
            <el-form-item
              v-for="(domain, index) in dynamicValidateForm.domains"
              :label="'属性' + (index + 1)"
              :key="domain.key"
              :prop="'domains.' + index + '.value'"
              :rules="{required: true, message: '属性不能为空', trigger: 'blur'}"
            >
              <div style="display: contents">
                <el-input v-model="domain.value" placeholder="请输入属性名"></el-input>
                <el-input v-model="domain.unit" placeholder="属性单位" style="margin-left: 20px"></el-input>
              </div>
              <el-button @click.prevent="removeDomain(domain)">删除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
              <el-button @click="addDomain">新增域名</el-button>
              <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-show="flag==2" class="show_right1">
          <h3>请添加{{categoryNameSlected}}具体装备</h3>
          <el-form :model="equipmentForm" status-icon  ref="equipmentForm" label-width="200px" class="demo-equipmentForm" style="width: 70%">
            <el-form-item v-for="(item, index) in formItemList" :label="item.label" :key="index">
              <el-input v-model="equipmentForm[item.label]" :placeholder="'请输入' + item.label"></el-input>
              <span style="margin-left: 10px">{{ item.unit }}</span>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm2()">提交</el-button>
              <el-button @click="resetForm('equipmentForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-show="flag==3" class="show_right1">
          <el-descriptions class="margin-top" :title="equipmentListName" :column="2" :size="size" border>
            <el-descriptions-item v-for="(item, index) in equipmentInfo" :key="index">
              <template slot="label">
                {{ item.label }}
              </template>
              <div class="input-wrapper">
                <el-input v-model="item.value" placeholder="输入修改值" class="inline-input"></el-input> {{ item.unit }}
                <!-- <el-input v-model="item.unit" placeholder="输入修改值" class="inline-input"></el-input> -->
              </div>
            </el-descriptions-item>
          </el-descriptions>
          <el-button type="primary" @click="submitModifiedValue" style="margin-top: 10px;">提交修改</el-button>
          <!-- <el-button type="danger" @click="deleteInfo()">删除</el-button> -->
        </div>
      </div>
    </div>


  </div>
</template>
<style lang='scss'>
#tree {
  width: 30%;
  // color: transparent;
}
.input-wrapper {
  display: flex;
  align-items: center;
}

.inline-input {
  margin-left: 10px; /* 适当调整间距 */
  width: max-content;
}

</style>
<script>


import {downloadCatgoryInfo,downloadCatgoryList, downloadEquipmentInfo, downloadEquipmentList, uploadCategoryInfo,uploadEquipmentInfo,upEquipmentInfo} from "@/api/ssl";


export default {
  data() {
    return {

      modifiedValue: '',
      size:null,
      categoryList:[],
      equipmentList:[],
      equipmentInfo:null,
      equipmentListName:null,
      equipmentId: null,
      formItemList: [],
      equipmentForm: {}, // 表单数据模型
      dynamicValidateForm: {
        domains: [{
          value: '',
          unit:''
        }],
        equipmentname: '',
      },
      filterText: '',
      flag:10,
      add_flag:1,
      data2: [
        {
          id: 1,
          label: '固有要素',
          description:'固有要素是系统中基本有的要素。',
          children: [
            {
              id: 'a',
              label: '人员要素',
              description:'对于复杂战场作战体系下，人员要素是战场数据要素的重要组成部分。其中人员要素包括指挥人员、作战人员、侦查人员等。按职权对被指挥人员(作战人员)下达命令、指示，以及实施作战指挥活动。',
              children: [
                { id: 'a1', label: '指挥人员',description:'指挥人员是指某作战系统中，掌握作战指挥最高权力，负责作战指挥全责的人员。在现代条件下，指挥人员是包括指挥员及其指挥机关成员在内的指挥群体。指挥人员是作战指挥的主体。指挥人员的主要活动包括运筹、决策、计划、组织、协调、控制等。按职权对被指挥者下达命令、指示，实施作战指挥活动。指挥人员是指挥群体的核心。除最高统帅外，指挥者同时又是被指挥者，具有指挥者和被指挥者的双重性质。指挥人员在作战指挥系统中起决定性的作用，其组织结构和素质制约着作战指挥效能的发挥。', },
                { id: 'a2', label: '侦查人员' ,description:'侦察人员按照侦查计划对天气、地理、时间、电磁环境和敌方各种情况进行全面考察、向指挥人员、作战人员、后勤人员等提供有价值的信息，可采用网络、卫星、传感器、雷达等手段。',},
                { id: 'a3', label: '作战人员' ,description:'作战人员按照指挥员的指挥方案进行行军、空战、火力覆盖等活动。作战人员是被指挥者，是命令、指示、计划的执行者和传递者。不过根据作战指挥的层次性、决定了除士兵以外的作战人员也有指挥对象。士兵是最基层的作战人员，任何级别的指挥最终都要落到士兵的行动上，一切行动计划，最终要靠士兵去完成。指挥者通过下级指挥员及指挥机关完成对士兵的指挥。',},
              ],
            },
            {
              id: 'b',
              label: '时间要素',
              description:'时间要素主要包括时区和时间单位等，它主要描述了空战场当前的时间信息。',
              children: [{ id: 'b1', label: '时区',description:'在空战场中，时区的具体描述与地理位置有关。时区通常用于标识地球上不同地区的时间差异。以下是时区描述示例：空战场位于东经120度，使用东八区时间（UTC+8）。' ,}],
            },
            {
              id: 'c',
              label: '环境要素',
              description:'战场环境是战场中必不可少的一个部分，战场环境具有复杂性，所以在对战场数据样本空间进行形式化描述时必须先对战场环境要素本身的组成进行分类。环境要素分为大气环境，地形环境，电磁环境，地面设施四个部分。',
              children: [
                {
                  id: 'c1',
                  label: '大气环境',
                  description:'大气环境是指地平面以上的地球周围的气体部分。大气环境对作战有很大的影响，在导弹等武器投射、飞行、降落过程中都要加以考虑，因此大气环境要素也是整个战场环境领域的组成部分。常见的大气环境要素有：大气温度、大气湿度，风速和大气压等。',
                  children: [
                    { id: 'c1a', label: '大气温度',description:'大气温度是指在地球周围的气体部分中的温度。在战场环境中，了解大气温度对于武器投射、飞行和降落等过程至关重要。温度的变化会影响空气密度，从而影响飞行器的性能。', },
                    { id: 'c1b', label: '大气湿度',description:'大气湿度是指空气中水蒸气的含量。在战场环境中，了解大气湿度对于预测降水、能见度和雷达效能等方面至关重要。湿度的变化会影响空气的密度和电磁波的传播。', },
                    { id: 'c1c', label: '风速' ,description:'风速是指空气流动的速度。在战场环境中，了解风速对于飞行器的航迹规划、火力覆盖和气象条件等方面具有重要意义。风速的方向和强度会直接影响各种军事行动。',},
                    { id: 'c1d', label: '大气压' ,description:'大气压是指大气对于单位面积的压力。在战场环境中，了解大气压对于导弹、飞机等飞行器的设计和性能至关重要。大气压的变化会影响气动力学性能和导弹弹道。',},
                  ],
                },
                {
                  id: 'c2',
                  label: '地形环境（防控部署）',
                  description:'地形环境是指地球表面和海平面以上的物体的地点信息，地形起伏情况以及地表温度',
                  children: [
                    { id: 'c2a', label: '地点' ,description:'地点指的是地球表面或海平面以上的具体位置。在防控部署的背景下，地点信息对于战场定位、目标锁定以及军事部署都至关重要。详细的地点信息可用于有效的军事规划和指挥。',},
                    { id: 'c2b', label: '地形',description:'描地形是指地球表面的自然形状和地貌特征。在防控部署中，了解地形对于军事部署、隐蔽部署和战术规划至关重要。不同的地形可能对作战单位的移动和可见性产生重大影响。', },
                    { id: 'c2c', label: '地标温度',description:'地标温度是指地表或地标物体的温度。在防控部署中，了解地标温度对于红外探测、目标识别和电子战等方面至关重要。地标温度的变化可以影响传感器的性能和军事设备的操作。', },
                  ],
                },
                {
                  id: 'c3',
                  label: '电磁环境',
                  description:'电磁环境是指存在于上述四个领域中的所有和电磁相关的环境统称为电磁环境。常见的要素有：磁场强度，电磁波幅值和电磁频率等。而复杂电磁环境指的是在一定的战场空间内，由空域、时域、频域、能量上分布的数量繁多、样式复杂、密集重叠、动态交迭的电磁信号构成的电磁环境。',
                  children: [
                    { id: 'c3a', label: '磁场强度',description:'磁场强度是指电磁场中磁场的强度。在防控部署中，了解磁场强度对于电子设备、导航系统和通信系统的运作至关重要。不同的磁场强度可能影响电磁设备的性能和定位准确性。', },
                    { id: 'c3b', label: '电磁波幅值',description:'电磁波幅值表示电磁波的振幅或波峰的大小。在防控部署中，了解电磁波幅值对于电磁传感器、通信设备和雷达系统的设计和操作至关重要。不同幅值的电磁波可能用于不同用途，例如通信或侦测。', },
                    { id: 'c3c', label: '电磁频率' ,description:'电磁频率是指电磁波的频率，通常以赫兹（Hz）为单位。在防控部署中，了解电磁频率对于电磁干扰、通信频段规划和隐身技术的研究都非常关键。不同频率的电磁波在不同的应用中有不同的特性。',},
                  ],
                },
                {
                  id: 'c4',
                  label: '地面设施',
                  description: '地面设施指存在于地球表面没有被海洋覆盖的部分，用于各项用途的民用或军用设施。空战场中常见的地面设施包括雷达站，军备库，发电厂，气象站，指挥部和机场等。',
                  children: [
                    { id: 'c4a', label: '雷达站', description: '雷达站是一种电子设备，用于探测和定位空中目标，特别是飞机、导弹和航天器。', },
                    { id: 'c4b', label: '军备库', description: '军备库是存储和管理军事装备、武器和弹药的设施，用于备战和战时需要。', },
                    { id: 'c4c', label: '发电厂', description: '发电厂是生产电能的设施，为军事活动提供电力支持，保障设备和通信的正常运行。', },
                    { id: 'c4d', label: '气象站', description: '气象站用于监测和记录气象信息，为作战决策提供重要的天气数据和预测信息。', },
                    { id: 'c4e', label: '指挥部', description: '指挥部是军队指挥和协调作战的机构，负责制定战略战术计划和指挥作战行动。', },
                    { id: 'c4f', label: '机场', description: '机场是提供飞机起降、停靠和维护的场所，对于军事机动和空中支援至关重要。', },
                  ],
                },
              ],
            },
            {
              id: 'd',
              label: '装备要素',
              description: '装备要素包括各类军事装备的关键信息，用于描述装备的特性和性能。',
              children: [
                {
                  lable:null,
                  children:[]
                }
              ],
            },
          ],
        },
        {
          id: 2,
          label: '作战事件要素',
          description: '作战事件要素类包括若干个子类，分别为事件动作，事件时间，事件编号，地理位置，我方信息和敌方信息。',
          children: [
            {
              id: 'A',
              label: '事件编号',
              description: '事件编号描述了空战场作战事件的编号，是标识空战场作战事件的唯一编码。通过事件编号可以唯一标识每一个空战场作战事件。',
            },
            {
              id: 'B',
              label: '事件动作',
              description: '事件动作描述了空战场作战事件中实体在某一时间段内的行为，动作在时间上具有一定的持续性，动作在粒度上也可以被细化为序列。',
            },
            {
              id: 'C',
              label: '事件时间',
              description: '时间描述了空战场作战事件所具有的时间属性，包括起始时间点、时区、持续时间和结束时间。',
              children: [
                { id: 'c1a', label: '时区', description: '描述空战场作战事件发生的地点所在的时区。' },
                { id: 'c1b', label: '开始时间', description: '描述空战场作战事件发生的起始时间。' },
                { id: 'c1c', label: '持续时间', description: '描述空战场作战事件从开始到结束整个过程所持续的时间。' },
                { id: 'c1d', label: '结束时间', description: '描述空战场作战事件发生的结束时间。' },
              ],
            },
            {
              id: 'D',
              label: '地理位置',
              description: '地理位置描述了空战场作战事件所具有的空间属性，是在空间上对于空战场作战事件的描述，描述了空战场作战事件发生的位置。',
            },
            {
              id: 'E',
              label: '敌方信息',
              description: '敌方信息描述了在空战场中，对敌方出现的各要素，作战实体的描述。',
              children: [
                { id: 'e1a', label: '编队高度', description: '描述敌方编队的高度。' },
                { id: 'e1b', label: '编队位置', description: '描述敌方编队的位置。' },
                { id: 'e1c', label: '编队速度', description: '描述敌方编队的速度。' },
                { id: 'e1d', label: '编队加速度', description: '描述敌方编队的加速度。' },
                { id: 'e1e', label: '航向角', description: '描述敌方编队的航向角。' },
              ],
            },
            {
              id: 'F',
              label: '我方信息',
              description: '我方信息描述了在空战场中，对我方出现的各要素，作战实体的描述。',
              children: [
                { id: 'f1a', label: '编队高度', description: '描述我方编队的高度。' },
                { id: 'f1b', label: '编队位置', description: '描述我方编队的位置。' },
                { id: 'f1c', label: '编队速度', description: '描述我方编队的速度。' },
                { id: 'f1d', label: '编队加速度', description: '描述我方编队的加速度。' },
                { id: 'f1e', label: '航向角', description: '描述我方编队的航向角。' },
              ],
            },
          ],


        }],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      categoryNameSlected:null
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val);
    },
  },
  methods: {
    submitModifiedValue() {
      this.$confirm("是否提交?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
        // 构建所需的格式并将其记录或发送到后端
        this.modifiedValues = this.equipmentInfo.map((item) => {
          return {
            label: item.label,
            value: item.value,
            unit: item.unit,
          };
        });
        upEquipmentInfo(this.equipmentId,this.modifiedValues)
        .then((response) =>{
          console.log(response);
          this.equipmentInfo=response.data
        });
        // console.log(curnode);
        // uploadeEquipmentInfo(this.modifiedValues)
        // 提交逻辑
        this.$message({
          type: "success",
          message: "提交成功!",
        })
      })
      .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
      });
        
      
    // 将 this.modifiedValue 发送给后端
    // 可以使用 Ajax 请求、axios 等方式发送数据给后端
    // 例如：axios.post('/api/updateValue', { modifiedValue: this.modifiedValue })
    },
    addClick1(){
      this.flag=1;
      this.add_flag=1;
    },
    addClick2(){
      this.flag=2;
      this.add_flag=1;
    },
    submitForm(formName) {
      this.$confirm("是否提交?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "提交成功!",
          });
          this.$refs[formName].validate((valid) => {
            let equipmentname = {};
            equipmentname.name = this.dynamicValidateForm.equipmentname;
            let contentPost = JSON.parse(
              JSON.stringify(this.dynamicValidateForm.domains)
            );
            contentPost.push(equipmentname);
            console.log('contentPost',contentPost)
            uploadCategoryInfo(contentPost).then((response) => {
              this.dynamicValidateForm.equipmentname = "";
              this.dynamicValidateForm.domains = [
                {
                  value: "",
                  unit:""
                },
              ];
              // 处理后端的响应
              console.log(response);
              downloadCatgoryList("装备要素").then((response) => {
                this.data2[0].children[3].children = response.data;
              });
            });
          });
          this.flag = 10;
          this.add_flag = 10;
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    submitForm2(){
      // alert('submit!');
      for (const item of this.formItemList) {
        this.equipmentForm[item.label] += ','+item.unit;
      }
      uploadEquipmentInfo(this.equipmentForm,this.categoryNameSlected)
      .then(response=>{
        for (const item of this.formItemList) {
          this.equipmentForm[item.label] ='';
        }
        downloadCatgoryList("装备要素")
        .then(response=>{
              this.data2[0].children[3].children=response.data
        })
      })

      this.flag=10
      this.add_flag=11

    },
    handleNodeClick(node,data){
      let mylevel=1;
      let curnode=data;
      while (data.parent.level!=0){
        if(data.data.label=="装备要素")
          break;
        mylevel=mylevel+1;
        data=data.parent;
      }
      if (data.parent.level==0){
        return ;
      }
      if(mylevel==1){
        downloadCatgoryList(curnode.data.label)
          .then(response=>{
            this.data2[0].children[3].children=response.data
          })
        this.add_flag=10;
        this.flag=10;
      }else if(mylevel==2){
        this.categoryNameSlected = curnode.data.label
        downloadEquipmentList(curnode.data.label)
          .then(response=>{
            response.data.data=response.data.data.slice(1)
            response.data.data="[{label:'型号',value:' '},"+response.data.data
            this.formItemList = eval ("(" + response.data.data + ")")
          })
        this.add_flag=11;
        this.flag=10;
      }else if(mylevel==3){
        downloadEquipmentInfo(curnode.data.label)
          .then(response=>{
            let info=eval(response.data.data)
            console.log(curnode.data);
            this.equipmentId=curnode.data.id;
            this.equipmentInfo = info
            this.equipmentListName = curnode.data.label+"具体信息表"
          })
        this.add_flag=1;
        this.flag=mylevel;
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    }
  },
};
</script>


<style>

.item {
  white-space: nowrap;
}

#show_help{
  width: 70%;
  flex:1;
}

#show_help2{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

#tree{
  width: 20%;
}

.description-box {
  margin-left: 30px;
  flex-shrink: 0;
}

.el-form-item__content {
  display: flex;
}

.center-content {
  width: 70%;
  flex: 1;
}
</style>
